<!-- del模态框组件 -->
<script lang="ts" setup>
import { useModal } from '@/hooks'
import type { Ref } from 'vue'

/* // 控制模态框
// 1.dom绑定
// const delRef = ref()
// // 2.创建模态框
// const delModal = ref()
// onMounted(() => {
//   delModal.value = new bootstrap.Modal(delRef.value, { backdrop: true, keyboard: true })
//   // 4.监视delmodal隐藏：hidden.bs.modal	当互动视窗隐藏后将会触发此事件（等CSS转换完成）
//   delRef.value.addEventListener('hidden.bs.modal', function () {
//     // do something...
//     delShow.value = false
//   })
// })
// 3.控制模态框
//父传子：接收=>props 还需要子传父：传递delShow的变化给父组件 =>v-model =>defineModel

// const props = defineProps({
//   delShow: {
//     type: Boolean,
//     defalue: false
//   }
// })

// // 监听delShow的变化=>delModal.value
// watch(
//   () => delShow.value,
//   (newValue) => {
//     if (newValue) {
//       delModal.value.show()
//     } else {
//       delModal.value.hide()
//     }
//   }
// )*/

const delShow = defineModel() as Ref<boolean>
const { modalRef: delRef } = useModal(delShow)

// 子传父
const emit = defineEmits(['delSubmit'])
//del服务
const delSubmit = () => {
  // 触发自定义事件(可传递参数)
  emit('delSubmit')
}
</script>
<template>
  <div
    class="modal fade fs-5"
    id="delModal"
    ref="delRef"
    tabindex="-1"
    aria-labelledby="delModal"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title fs-5" id="delModalLabel">删除</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body fs-5">确定删除该条记录吗？</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            取消
          </button>
          <button type="button" class="btn btn-primary" @click="delSubmit()">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped></style>
